<template>
  <div>
    <el-button
      style="color:black;fontSize:15px"
      icon="el-icon-back"
      type="text"
      @click="$router.back()"
    >返回
    </el-button>
    <div class="Bbox">
      <el-button type="danger" style="margin-top: 20px; margin-left: 20px;" @click="addVisible = true">添加工作模式</el-button>

      <el-table
        :data="tableData"
        style="width: 100%;margin-top: 20px;margin-left: 20px;"
      >
        <el-table-column
          prop="id"
          label="工作模式编号"
          width="180"
        />
        <el-table-column
          prop="name"
          label="工作模式"
          width="180"
        />
        <el-table-column
          prop="workPatternTypeDesc"
          label="类型"
        />
        <el-table-column
          prop="workDate"
          label="工作日期"
        />
        <el-table-column
          prop="workEndMinute1"
          label="工作时间"
        >
          <template v-slot="{ row }">
            <span>{{ ((row.workEndMinute1-row.workStartMinute1)/60).toFixed(2) }}小时</span>
          </template>

        </el-table-column>

        <el-table-column

          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="delPattern">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          :current-page="pageParams.page"
          :page-size="pageParams.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
      <!-- 编辑 -->
      <el-dialog
        title="编辑工作模式"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >

        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="工作模式名称:">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="连续工作天数">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="周一" name="type" />
              <el-checkbox label="周二" name="type" />
              <el-checkbox label="周三" name="type" />
              <el-checkbox label="周四" name="type" />
              <el-checkbox label="周五" name="type" />
              <el-checkbox label="周六" name="type" />
              <el-checkbox label="周日" name="type" />

            </el-checkbox-group>
            <span style="color: #bac0cd;">选择时间为工作时间未选中为休息时间</span>
            <el-form-item label="工作时间:">
              <el-time-picker
                v-model="form.date1"
                :picker-options="{
                  selectableRange: '18:30:00 - 20:30:00'
                }"
                placeholder="任意时间点"
              />
              <span>至</span>
              <el-time-picker
                v-model="form.date2"
                arrow-control
                :picker-options="{
                  selectableRange: '18:30:00 - 20:30:00'
                }"
                placeholder="任意时间点"
              />
            </el-form-item>
            <el-button type="primary" @click="editAdd">确定</el-button>
            <el-button @click="dialogVisible=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 添加 -->
      <el-dialog
        title="新增工作模式"
        :visible.sync="addVisible"
        width="30%"
      >

        <el-tabs v-model="activeName" @tab-click="addHandleClick">
          <el-tab-pane label="礼拜制" name="first">
            <el-form ref="form" label-width="100px">
              <el-form-item label="工作模式名称:">
                <el-input v-model="form.name" />
              </el-form-item>
              <el-form-item label="连续工作天数">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox label="周一" name="type" />
                  <el-checkbox label="周二" name="type" />
                  <el-checkbox label="周三" name="type" />
                  <el-checkbox label="周四" name="type" />
                  <el-checkbox label="周五" name="type" />
                  <el-checkbox label="周六" name="type" />
                  <el-checkbox label="周日" name="type" />
                </el-checkbox-group>
                <span style="color: #bac0cd;">选择时间为工作时间未选中为休息时间</span>
                <el-form-item label="工作时间:">
                  <el-time-picker
                    v-model="form.date1"
                    :picker-options="{
                      selectableRange: '00:00:00 - 23:59:59'
                    }"
                    placeholder="任意时间点"
                  />
                  <span>至</span>
                  <el-time-picker
                    v-model="value2"
                    arrow-control
                    :picker-options="{
                      selectableRange: '00:00:00 - 23:59:59'
                    }"
                    placeholder="任意时间点"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="addhandle">确定</el-button>
                  <el-button @click="addhandleClose">取消</el-button>
                </el-form-item>

              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- =============== -->
          <el-tab-pane label="连续制" name="second">
            <el-form ref="form" label-width="100px" :model="form">
              <el-form-item label="工作模式名称:">
                <el-input v-model="form.name" style="width: 500px;" />
              </el-form-item>
              <el-form-item label="连续工作天数">

                <span>上
                  <el-input v-model="form.workingDays" style="width: 200px;">
                    <template slot="append">天</template>
                  </el-input>
                </span>

                <span>休
                  <el-input v-model="form.rest" style="width: 200px;">
                    <template slot="append">天</template>
                  </el-input>
                </span>
              </el-form-item>

              <el-form-item label="工作时间:">
                <el-time-picker
                  v-model="form.date1"
                  :picker-options="{
                    selectableRange: '00:00:00 - 23:59:59'
                  }"
                  placeholder="任意时间点"
                />
                <span>至</span>
                <el-time-picker
                  v-model="form.date2"
                  arrow-control
                  :picker-options="{
                    selectableRange: '00:00:00 - 23:59:59'
                  }"
                  placeholder="任意时间点"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="addhandle">确定</el-button>
                <el-button @click="addhandleClose">取消</el-button>
              </el-form-item>

            </el-form>
          </el-tab-pane>
        </el-tabs>

      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getWorkPatternAPI } from '@/api/staffManagement'

export default {
  data() {
    return {
      value1: new Date(2016, 9, 10, 18, 40),
      value2: new Date(2016, 9, 10, 18, 40),
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        workingDays: '',
        rest: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      addForm: {}, // 添加-表单
      addVisible: false, // 添加-开关
      activeName: 'second',
      // 渲染参数
      pageParams: {
        pageSize: 10,
        page: 1
      },
      total: 0,
      tableData: [],
      dialogVisible: false // 控制显示

    }
  },
  created() {
    this.getList()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    async getList() {
      const res = await getWorkPatternAPI(this.pageParams)
      // console.log(res)
      this.tableData = res.items
      this.total = Number(res.counts)
      console.log(this.tableData)
    },
    handleSizeChange(newPageSize) {
      this.pageParams.pageSize = newPageSize
      console.log(this.pageParams)
      this.getList()
    },
    // 页码改变
    handleCurrentChange(newPage) {
      this.pageParams.page = newPage
      this.getList()
    },
    // 编辑
    handleClick(id) {
      this.dialogVisible = true
      console.log(id)
    },
    // 编辑 确定
    editAdd() {
      this.$message.error('很抱歉，演示系统，不允许修改')
      setTimeout(() => {
        this.$message.error('接口异常')
      }, 2000)
    },
    // 添加 确定按钮
    addhandle() {
      this.$message.error('很抱歉，演示系统，不允许修改')
      setTimeout(() => {
        this.$message.error('接口异常')
      }, 2000)
    },
    // 删除
    delPattern() {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 当用户点击确定按钮时执行的代码
          // 在这里可以处理删除逻辑
          this.$message.error('很抱歉，演示系统，不允许修改')
          setTimeout(() => {
            this.$message.error('接口异常')
          }, 2000)
        })
        .catch(() => {
          // 当用户点击取消按钮时执行的代码

        })
    },
    // 关闭
    handleClose() {
      this.dialogVisible = false
    },
    // 添加-tab栏
    addHandleClick(tab, event) {
      console.log(tab, event)
    },
    // 新增工作模式-确定
    async addWork() {

    },
    // 添加-关闭
    addhandleClose() {
      this.addVisible = false
    }
  }
}

</script>
<style>
.Bbox{
    width: 100%;
    height: 900px;
    background-color: #fff;
}
.block{
  padding-top: 25px;
  font-size: 24px;
  display:flex;
  justify-content: center;
}
</style>
